<!DOCTYPE html>
<head >
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../frame/semanticUI/UI-master/semantic.min.js"></script>

    <link rel="stylesheet" href="../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../frame/elementUI/lib-master/index.js"></script>

    <link rel="stylesheet" href="../css/about.css">
    <title>关于站长页</title>

</head>

<script>
    $(function () {
        $('#githubButton').popup({
            popup: $('#github'),
            position: 'bottom center'
        });
        $('#weixinButton').popup({
            popup: $('#weixin'),
            position: 'bottom center'
        });
        $('#qqButton').popup({
            popup: $('#qq'),
            position: 'bottom center'
        });
        $('#searchInput').keydown(function () {
            if(event.keyCode==13){
                axios({
                    method: "GET",
                    url: "/other/search",
                    params:{
                        query: $('#searchInput').val()  //搜索内容
                    },
                }).then((res)=>{
                    location.href = "search.html";
                });
            }
        });
        //登录下拉菜单
        $(".ui.dropdown").dropdown({
            allowAdditions: true //允许添加新的菜单项
        });
    });
</script>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted vertical masthead center aligned segment" style="padding-top: 5px;height: 70px">
        <div class="ui container">
            <!-- 主菜单 -->
            <div class="ui large secondary inverted pointing menu">
                <a class="item" href="index.html" ><i class="home icon"></i>首页</a>
                <a class="item" href="types.html" ><i class="idea icon"></i>分类</a>
                <a class="item" href="archives.html" ><i class="clone icon"></i>归档</a>
                <a class="item" href="tags.html" ><i class="tags icon"></i>标签</a>
                <a class="active item" href="about.html" ><i class="info icon"></i>关于站长</a>
                <div class="right item" style="margin-top: 7px">
                    <div class="ui icon input">
                        <input type="text" v-model="searchInput.query" placeholder="搜索....." style="width: 300px" id="searchInput">
                        <i @click="submitQuery()" class="search link icon"></i>
                    </div>
                </div>
                <!-- 登录 -->
                <div class="ui right floated dropdown item" style="margin-top: 7px;float: right">
                    <div class="text">
                        <img v-bind:src="visitor.avatar" class="ui avatar image" style="width: 30%">
                        <strong >{{visitor.username}}</strong>
                    </div>
                    <i class="ui dropdown icon"></i>
                    <div class="menu">
                        <a href="visitorLogin.html" class="item" v-if="visitor.id==null">登录</a>
                        <a href="visitorLogin.html" class="item" v-if="visitor.id!=null">切换账号</a>
                        <a @click="logout()" class="item">注销</a>
                    </div>
                </div>

            </div>
        </div>
    </nav>

    <!-- 中间内容 -->
    <div style="padding-top: 40px;">
        <div class="ui container" style="width: 1000px">
            <div class="ui container">
                <div class="ui stackable grid">
                    <!-- 左边布局 -->
                    <div class="eleven wide column">
                        <img src="../image/santi.jpg" alt="" class="ui rounded image">
                    </div>
                    <!-- 右边布局 -->
                    <div class="five wide column">
                        <div class="ui top attached segment">
                            <div class="ui header">关于我</div>
                        </div>
                        <!-- 话语 -->
                        <div class="ui attached segment">
                            <p>在中国，任何超脱飞扬的思想都会砰然坠地的，现实的引力太沉重了</p>
                            <p>碧蓝幻想，一部无人问津的番剧罢了;一个正式又向往大型前进的博客系统</p>
                            <p>活着本身就很美妙，如果连这道理都不懂，怎么去探索更深的东西呢？</p>
                        </div>
                        <!-- 。。 -->
                        <div class="ui attached segment">
                            <div class="ui orange basic left label">编程</div>
                            <div class="ui orange basic left label">图片</div>
                            <div class="ui orange basic left label">娱乐</div>
                        </div>
                        <!-- 标签 -->
                        <div class="ui attached segment">
                            <div class="ui teal basic left pointing label">Java</div>
                            <div class="ui teal basic left pointing label">JavaWeb</div>
                            <div class="ui teal basic left pointing label">SSM</div>
                        </div>
                        <!-- 个人信息 -->
                        <div class="ui bottom attached segment">
                            <a href="#" class="ui circular icon button" id="githubButton"><i class="github icon"></i></a>
                            <a href="#" class="ui circular icon button" id="weixinButton"><i class="weixin icon"></i></a>
                            <a href="#" class="ui circular icon button" id="qqButton"><i class="qq icon"></i></a>
                        </div>
                        <!-- 弹出框 -->
                        <div class="ui flowing popup transition hidden" id="github">
                            <div class="ui images" style="font-size: inherit !important;">
                                <div class="image">
                                    <img src="../image/mybibi.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                </div>
                            </div>
                        </div>
                        <div class="ui flowing popup transition hidden" id="weixin">
                            <div class="ui images" style="font-size: inherit !important;">
                                <div class="image">
                                    <img src="../image/mybibi.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                </div>
                            </div>
                        </div>
                        <div class="ui flowing popup transition hidden" id="qq">
                            <div class="ui images" style="font-size: inherit !important;">
                                <div class="image">
                                    <img src="../image/mybibi.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="ui inverted vertical segment" style="padding-top: 50px;margin-top: 100px">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="item">
                        <img src="../image/mybibi.jpg" class="ui rounded image" style="width: 120px">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header" style="opacity: 0.8">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#"class="item">用户故事（User Story）</a>
                        <a href="#"class="item">来自未来的你</a>
                        <a href="#"class="item">fate/zero</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header" style="opacity: 0.8">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#"class="item">转生成为魔剑那件事</a>
                        <a href="#"class="item">人生初体验</a>
                        <a href="#"class="item">学生故事（Student Story）</a>
                    </div>
                </div>
                <div class="seven wide column" style="opacity: 0.8">
                    <h4 class="ui inverted header">最新博客</h4>
                    <p>鄙人个人博客，仅有于非商业用途，为人民服务是我的职责（分享，程序，开发），来自一只可爱的程序猿</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="letter-spacing: 2px;opacity: 0.8" >Copyright # 2022-2023 Lirenmi Designed by Lirenmi</p>
            <div class="" style="height: 50px"></div>
        </div>
    </footer>

</div>
</body>
    <!-- axios -->
    <script src="../frame/axios/axios.min.js"></script>
<script>

    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data:{
            active: "1",
            //登录信息(留言时登录)
            visitor: {
                id: null,
                username: '未登录',
                password: '',
                email: '',
                avatar: 'https://img.gejiba.com/images/6fdc934e8cb5aa040764d0ff5b287d00.webp',
                createTime: ''
            },
            //全文搜索框内容
            searchInput: {
                query: '',
                currentPage: 0,
                pageSize: 5,
            },
        },
        created(){
            this.gainVisiter();
        },
        methods:{
            //访客登录信息获取
            gainVisiter(){
                axios({
                    method: "GET",
                    url: "/visiter/gainData",
                }).then((res)=>{
                    if(res.data==''){

                    }else{
                        this.visitor=res.data;
                    }
                });
            },
            //注销访客
            logout(){
                axios({
                    method: "GET",
                    url: "/visiter/logout",
                }).then((res)=>{
                    location.reload();
                });
            },
            //搜索内容
            submitQuery(){
                axios({
                    method: "GET",
                    url: "/other/search",
                    params:{
                        query: this.searchInput.query  //搜索内容
                    },
                }).then((res)=>{
                    location.href = "search.html";
                });
            },
        }
    });
</script>
</html>